<template>
	<div>
		<div class="classifiedSearch">
			<span
				style="float:left;height: 50px;background-color: #ffffff;font-size: 24px;line-height: 50px;margin-top: 10px;margin-left: 10px;">分类：</span>
			<el-radio-group v-model="radio1" @change="radio1Update" style="background-color: #ffffff;width:
				1300px;height: 140px;">
				<el-radio label="1" border>全部</el-radio>
				<el-radio label="11" border>变压器</el-radio>
				<el-radio label="22" border>电缆</el-radio>
				<el-radio label="34" border>电池</el-radio>
				<el-radio label="54" border>特殊组件</el-radio>
			</el-radio-group>
		</div>
		<div id="goods_container">
			<div id="goods_container_content">
				<ul class="goods">
					<li class="content" v-for="item in goodsLists" style="list-style: none;">
						<div class="divbigImg">
							<div class="bigImgSize" target="item.goodsImgUrl"
								@click="imgToEquipmentsDetails(item.goodsImgUrl)">
								<img v-if="item.goodsImgUrl" class="bigImg" v-model="item.goodsImgUrl" :src="require('@/assets/equipments/'+item.goodsImgUrl)">
							</div>
						</div>
						<div class="divgoodImgLists">
							<el-carousel :interval="4000" :autoplay="false" type="card"
								style="width: 304px;background-color: #c5ffc2;" indicator-position="none" arrow="nerver"
								height="62px">
								<el-carousel-item style="width: 50px;height: 50px;margin-left: 50px;margin-top: 5px;">
									<img class="goodImg" :src="require('@/assets/equipments/'+item.goodsImgUrl)">
								</el-carousel-item>
							</el-carousel>
						</div>
						<div class="brief">
							<span class="goods_name" @click="toEquipmentsDetails">{{item.goodsName}}</span>
							<span class="goods_desc">{{item.goodsDescription}}</span>
							<span class="goods_price">￥ {{item.goodsPrice}}</span>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	import request from '@/utils/axios/request.js';
	export default {
		data() {
			return {
				radio1: '1',
				url: 'e001.jpg',
				imgList: [{
					url: 'e001.jpg',
				}],
				goodsLists: [{

					goodsId: '',
					goodsName: '',
					goodsPrice: '',
					goodsDescription: '',
					goodsImgUrl: '',
					goodImgLists: [{
						url: ''
					}]
				}, ]
			};
		},
		mounted() {
			// console.log(this.radio1);
			if (this.radio1 == 1) {
				request({
					method: 'post',
					url: '/equipments/findall',
				}).then((res) => {
					console.log(res)
					var jsonObj = JSON.parse(JSON.stringify(res.data.data));
					// console.log(jsonObj)
					// console.log('阿八八八')
					for (var i = 0; i < jsonObj.length; i++) {
						jsonObj[i].goodsName = jsonObj[i].eName;
						jsonObj[i].goodsDescription = jsonObj[i].eDescription;
						jsonObj[i].goodsPrice = jsonObj[i].eRealprice;
						jsonObj[i].goodsImgUrl = jsonObj[i].imageUrl;
					}
					this.goodsLists = jsonObj
					// 				console.log(jsonObj)
					// 				console.log('飞洒地方')
					// 				for (var i = 0; i < this.goodsLists.length; i++) {
					// 					console.log(this.goodsLists[i].imageUrl)
					// 				}

					// 				console.log('啊手动阀')

					// 				console.log(this.goodsLists);
					// 				console.log('阿斯蒂芬')

				})
			}
		},
		methods: {
			imgToEquipmentsDetails(e) {
				// console.log(e)
				// this.$cookies.set("imgSearch", e)
				let imgSearch = e
				// console.log(document.cookie)
				this.$router.push({
					path: 'equipmentDetails',
					query: {
						imgSearch: imgSearch
					}
				})
			},
			toEquipmentsDetails(e) {
				let clickSearch = e.target.innerHTML
				// console.log(e.target.innerHTML)
				// this.$cookies.set("clickSearch", e.target.innerHTML)
				// console.log(document.cookie)
				this.$router.push({
					path: 'equipmentDetails',
					query: {
						clickSearch: clickSearch
					}
				})

			},
			radio1Update() {
				if (this.radio1 == 1) {
					request({
						method: 'post',
						url: '/equipments/findall',
					}).then((res) => {
						var jsonObj = JSON.parse(JSON.stringify(res.data.data));
						for (var i = 0; i < jsonObj.length; i++) {
							jsonObj[i].goodsName = jsonObj[i].eName;
							jsonObj[i].goodsDescription = jsonObj[i].eDescription;
							jsonObj[i].goodsPrice = jsonObj[i].eRealprice;
							jsonObj[i].goodsImgUrl = jsonObj[i].imageUrl;
						}
						this.goodsLists = jsonObj
					})
				} else if (this.radio1 != null) {
					request({
						method: 'get',
						url: '/equipments/category/' + this.radio1,
					}).then((res) => {
						var jsonObj = JSON.parse(JSON.stringify(res.data.data));
						for (var i = 0; i < jsonObj.length; i++) {
							jsonObj[i].goodsName = jsonObj[i].eName;
							jsonObj[i].goodsDescription = jsonObj[i].eDescription;
							jsonObj[i].goodsPrice = jsonObj[i].eRealprice;
							jsonObj[i].goodsImgUrl = jsonObj[i].imageUrl;
						}
						this.goodsLists = jsonObj
					})
				}
			}
		}
	}
</script>

<style>
	.goods_price {
		background-color: transparent;
		height: 30px;
		font-size: 28px;
		color: #ff0000;

	}

	.goods_desc {
		width: 300px;
		height: 20px;
		text-align: center;
		color: #393939;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		margin-bottom: 3px;
	}

	.goods_name:hover {
		cursor: pointer;
	}

	.goods_name {
		height: 28px;
		font-size: 18px;
		margin-bottom: 3px;

	}

	.brief {
		background-color: transparent;
		all: initial;
		height: 93px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.divbigImg {
		background-color: transparent;
		width: 304px;
		height: 265px;
	}

	.bigImg:hover {
		cursor: pointer;
	}

	.bigImg {

		width: 230px;
		height: 230px;
		/* background-color: #b1b1b1; */
		margin-top: 40px;
	}

	#goods_container_content {
		width: 100%;
		/* background-color: #ff0000; */
	}

	#goods_container {
		background-color: transparent;
		width: 1300px;
		height: auto;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;

		margin: 0 auto;
	}

	.goods {

		padding-left: 12px;
	}

	.goods ul {

		width: 1500px;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}

	.goods li {

		background-color: #ffffff;
		width: 304px;
		height: 420px;
		margin: 8px 8px 8px 8px;


	}

	.divgoodImgLists {
		background-color: #00ffff;
		width: 304px;
		height: 62px;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;

	}

	.divgoodImgLists ul {
		list-style: none;
		height: 50px;
		width: 10px;
		margin: 0 auto;
	}



	.goodImgLists li {
		all: initial;
		width: 50px;
		height: 50px;
		margin-right: 40px;
		/* 	margin-right: 10px; */
	}

	.el-radio {
		background-color: #ffffff;
		margin-top: 20px;

	}

	.classifiedSearch {
		background-color: #ffffff;
		width: 1400px;
		height: 150px;
		margin: 0 auto;
		white-space: normal;
		word-break: break-all;
		overflow: hidden;
		display: flex;
		flex-direction: row;
		margin-bottom: 20px;
	}

	.el-carousel__item {
		all: initial;
		position: absolute;
		width: 100%;
		height: 100%;
	}

	.goodImg {
		width: 100%;
		height: 100%;
		/* background-color: #5500ff; */
	}

	.el-carousel__item:nth-child(2n) {
		background-color: #99a9bf;
	}

	.el-carousel__item:nth-child(2n+1) {
		background-color: #d3dce6;
	}

	.el-carousel__arrow {
		display: none;
	}
</style>